<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="/css/sapar.css"/>
    <link rel="stylesheet" type="text/css" href="/css/common.css"/>


    <style>

        .kv-item .kv-item-label {
            width: 5em;
        }
        .kv-item input[type=text]{


        }

        /*th {*/
        /*border: 1px solid #bdd0db;*/
        /*}*/

        /*#one {*/
        /*width: 411px;*/
        /*}*/

        /*#two {*/
        /*width: 411px;*/
        /*}*/

        /*#three {*/
        /*width: 170px;*/
        /*}*/

        /*#oneone {*/
        /*width: 200px;*/
        /*}*/

        /*#twotwo {*/
        /*width: 200px;*/
        /*}*/

        /*#threethree {*/
        /*width: 200px;*/
        /*}*/

        /*#fourfour {*/
        /*width: 200px;*/
        /*}*/

        /*#fivefive {*/
        /*width: 170px;*/
        /*}*/

        /*.gui-input {*/
        /*width: 97%;*/

        /*margin-left: 0px;*/
        /*}*/

        /*.table .table-operate a.buttona {*/
        /*background: #EFF6FA url("../../images/addico.png") no-repeat 4px 6px;*/
        /*height: 30px;*/
        /*text-align: center;*/
        /*line-height: 30px;*/
        /*width: 65px;*/
        /*border-radius: 5px;*/
        /*box-shadow: 1px 2px 3px;*/
        /*margin-left: 15px;*/
        /*margin-top: 5px;*/
        /*}*/

        /*.table .table-operate a.buttona2 {*/
        /*background: #EFF6FA url("../../images/delico.png") no-repeat 4px 6px;*/
        /*height: 30px;*/
        /*text-align: center;*/
        /*line-height: 30px;*/
        /*width: 65px;*/
        /*border-radius: 5px;*/
        /*box-shadow: 1px 2px 3px;*/
        /*margin-left: 15px;*/
        /*margin-top: 5px;*/
        /*}*/

        /*td {*/
        /*text-align: center;*/
        /*}*/
    </style>


    <title>厂家回收</title>
</head>

<body>
<!-- 遮罩层 -->
<div id="mask" class="mask"></div>
<div >
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <audio src="../../audio/Beep_Short.mp3" id="audio"></audio><!-- 成功提示音 -->
        <audio src="../../audio/Alarm_Clock (1).mp3" id="audio1"></audio><!-- 失败提示音 -->
        <form class="create-order">
            <div class="subfiled clearfix">
                <h2>厂家回收</h2>
            </div>

            <div class="subfiled-content" id="app">
                <div class="user_management">
                    <div class="subfiled-style2 clearfix">
                        <h2>网篮人员信息</h2>
                    </div>
                    <div class="add-box clearfix">
                        <div class="add-box-first">
                            <div class="kv-item clearfix">
                                <label>病人姓名：</label>
                                <div class="kv-item-content">
                                    <input type="text" maxLength="7" v-model=huishouWanglanTiaoma name="huishouWanglanTiaoma" id="wanglantiaoma"
                                           placeholder="网篮条码" autofocus="autofocus" @keyup.enter="enterFun" >
                                </div>
                                <label>网篮名称：</label>
                                <div class="kv-item-content">
                                    <input type="text" v-model="huishouWanglanMingcheng" name="huishouWanglanMingcheng" placeholder="网篮名称"
                                           readonly="readonly">
                                </div>
                                <label>交接人：</label>
                                <div class="kv-item-content">
                                    <input  type="text" v-model=huishouJiaojierenTiaoma maxLength="7"  name="huishouJiaojierenTiaoma"
                                            id="huishouJiaojierenTiaoma" placeholder="交接人" @keyup.enter="enterFun">
                                </div>
                                <label>回收人：</label>
                                <div class="kv-item-content">
                                    <input type="text" v-model=huishouHuishourenTiaoma maxLength="7" name="huishouHuishourenTiaoma"
                                           id="huishouHuishourenTiaoma" placeholder="回收人" @keyup.enter="doSave">
                                </div>
                                <div class="kv-item-content">
                                    <a href="javascript:;" class="sapar-btn sapar-btn-recom query-btn" id="save" @click="doSave">保存</a>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="user_management">
                    <div class="subfiled-style2 clearfix">
                        <h2>包数据</h2>
                    </div>
                    <!--表格开始-->
                    <div class="table">
                        <!--表格操作-->
                        <div class="table-operate ue-clear">
                            <a href="javascript:;" class="add" @click="addpackage">新增回收包</a>

                            <a href="javascript:;" class="del">全部删除</a>
                        </div>
                        <!--表格具体内容-->
                        <div class="table-box">
                            <table id="tpaTable">
                                <thead>
                                <tr>
                                    <th id="one">科室</th>
                                    <%--<th>网篮名称</th>--%>
                                    <th id="two">包名称</th>
                                    <th id="three">包数量</th>
                                    <th id="four">操作</th>
                                </tr>
                                </thead>
                                <tbody id="tpaTableBaby"  >
                                <tr v-for='package in packageList' key="package.keshi_packId">
                                    <td><input type="hidden" name="keshi" v-bind:value="package.keshi"/>{{package.keshiName}}</td>
                                    <%--<td><input type="hidden" name="huishouWanglanMingcheng" v-bind:value="package.huishouWanglanMingcheng"/><input type="hidden" name="huishouWanglanTiaoma" v-bind:value="package.huishouWanglanTiaoma"/>{{package.huishouWanglanMingcheng}}</td>--%>
                                    <td><input type="hidden" name="packId" v-bind:value="package.packId"/><input type="hidden" name="packName" v-bind:value="package.packName"/>{{package.packName}}</td>
                                    <td><input  name="packNum" style="text-align:center" maxlength="3" v-model:value="package.packNum"/></td>
                                    <td><a @click='detail(package.
                                    packId,package.packName)' v-model >器械清单</a><a @click="deleteBytype(package.packId,2)" >删除</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div><!--表格结束-->
                </div>
                <div id="queshi"class="user_management" style="display: none">
                    <div class="subfiled-style2 clearfix">
                        <h2>缺失信息</h2>
                    </div>
                    <div class="table">
                        <div class="table-box">
                            <table id="queshiTable">
                                <thead>
                                <tr>
                                    <th id="oneone">缺失包名称</th>
                                    <th id="twotwo">缺失器械</th>
                                    <th id="threethree">器械大小</th>
                                    <th id="fourfour">器械形状</th>
                                    <th id="fivefive">缺失数量</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody >
                                <tr v-for="product in productList">
                                    <td><input type="hidden" name="packageId" value=""/><input type="hidden" name="productName" value=""/>{{product.packageName}}</td>
                                    <td>{{product.productName}}</td>
                                    <td><input type="hidden" name=""/>{{product.productSize}}</td>
                                    <td>{{product.productFunction}}</td>
                                    <td><input type="text" style="text-align:center" class="gui-input" maxlength="3" v-model:value='product.num' /></td>
                                    <td><a @click="deleteBytype(product.productId,1)" >删除</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
    <div id="saper-ft"></div>
</div>

</body>

<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<%@ include file="../../js.jsp" %>

<script type="text/javascript">
    window.onload = function () {
        $("#wanglantiaoma").focus();
    }

    //判断是否为空
    function isNullOrEmpty(strVal) {
        if (strVal != null) {

        }
        if (strVal == '' || strVal == null || strVal == undefined) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 将弹出层的数据放到packageList
     */
    function callbackData(data){
        var packageList = vm.packageList;
        if(packageList.length != 0){
            for(var i=0 ; i < data.length ; i++){
                var flag = true;
                for(var j = 0 ; j <packageList.length ; j++){
                    if(packageList[j].keshi_packId==data[i].keshi_packId){
                        flag = false;
                        var packNum = parseInt(packageList[j].packNum);
                        var dataNum = parseInt(data[i].packNum);
                        packNum += dataNum;
                        packageList[j].packNum = packNum;
                        break;
                    }
                }
                if(flag){
                    packageList.push(data[i]);
                }
            }
        }else{
            vm.packageList = data;
        }
        $("#huishouJiaojierenTiaoma").focus();
    }

    function productCallbackData(data){
        var productList = vm.productList;
        $("#queshi").css("display",'');
        console.log(data);
        if(productList.length!=0){
            for(var i=0;i<data.length;i++){
                var flag = true;
                for(var j=0;j<productList.length;j++){
                    var productId = productList[j].package_productId;
                    var dataProductId = data[i].package_productId;
                    if(productId==dataProductId){
                        flag = false;
                        var productNum =parseInt(productList[j].num);
                        var dataNum = parseInt(data[i].num);
                        productNum += dataNum;
                        productList[j].num = productNum;
                        break;
                    }
                }
                if(flag){
                    productList.push(data[i]);
                }
            }
        }else{
            vm.productList = data;
        }
        $("#huishouJiaojierenTiaoma").focus();
    }

    var oPlay0 = document.getElementById("audio");
    var oPlay1 = document.getElementById("audio1");

    var vm = new Vue({
        el:'#app',
        data : {
            huishouWanglanTiaoma : '',
            huishouWanglanMingcheng : '',
            huishouJiaojierenTiaoma: '',
            huishouHuishourenTiaoma:'',
            packageList : [],
            productList:[],
        },
        created: function () {
            this.load();

        },
        methods :{
            //点击删除方法
            deleteBytype :function(deleteId,type){
                var deleteList = [];
                switch(type)
                {
                    case 1:
                        deleteList = vm.productList;
                        break;
                    case 2:
                        deleteList = vm.packageList;
                        break;
                    case 3:
                        layer.confirm('你确定要删除全部包么？', function(index){
                            vm.packageList = [];
                            layer.close(index);
                        });
                        break;
                    case 4:
                        layer.confirm('你确定要删除全部网篮么？', function(index){
                            vm.basketBarcodeList = [];
                            layer.close(index);
                        });
                        break;
                    default:
                        deleteList = [];
                }

                for(var i=0;i<deleteList.length;i++){
                    switch(type){
                        case 1:
                            if(deleteList[i].productId == deleteId){
                                deleteList.splice(i,1);
                            }
                            break;
                        case 2:
                            if(deleteList[i].packId == deleteId){
                                deleteList.splice(i,1);
                            }
                            break;
                    }

                }

            },

            addpackage : function(){
                layer.open({
                    type: 2,
                    title: '添加包',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['900px' , '650px'],
                    content: "/wutiaoma/cangjia"
                });
            },

            detail : function(packId,packName){
                layer.open(
                    {
                        type: 2,
                        title: '包明细',
                        maxmin: true,
                        shadeClose: true, //点击遮罩关闭层
                        area : ['800px' , '620px'],
                        content: '/wutiaoma/findQixieList.do?id=' + packId + '&name=' + packName
                    });
            },

            load : function(){
                this.addpackage()
            },
            enterFun: function () {
                var that = this;
                if ($("#wanglantiaoma").is(":focus") && !isNullOrEmpty(that.huishouWanglanTiaoma)) {
                    $.get("/wutiaoma/findwanglan.do?huishouWanglanTiaoma=" + that.huishouWanglanTiaoma,function(data){
                        if (data.status == true) {
                            oPlay0.play();
                            that.huishouWanglanMingcheng = data.zsWanglan.wlMingcheng;
                            $("#huishouJiaojierenTiaoma").focus();
//                            that.addpackage();
                        }else if (data.status == false) {
                            oPlay1.play();
                            that.huishouWanglanTiaoma = "";
                            that.huishouWanglanMingcheng = "";
                        }
                    })

                }
                if ($("#huishouJiaojierenTiaoma").is(":focus") && !isNullOrEmpty(that.huishouJiaojierenTiaoma)) {
                    oPlay0.play();
                    $("#huishouHuishourenTiaoma").focus();
                }
                if ($("#huishouHuishourenTiaoma").is(":focus") && !isNullOrEmpty(that.huishouHuishourenTiaoma)) {
                    this.doSave();
                    oPlay0.play();
                }

            },
            doSave :function(){
                var that = this;
                var check = true;
                //判断是否有包
                if ($("#tpaTableBaby tr").length == 0) {
                    check = false;
                    alert("请添加包信息");
                }

                if (isNullOrEmpty(that.huishouJiaojierenTiaoma) ) {
                    check = false;
                    alert("交接人不能为空");
                }
                if(isNullOrEmpty(that.huishouHuishourenTiaoma) ){
                    check = false;
                    alert("回收人不能为空")
                }
                if(isNullOrEmpty(that.huishouWanglanTiaoma)){
                    check = false;
                    alert("网篮不能为空")
                }
                if (huishouJiaojierenTiaoma == huishouHuishourenTiaoma) {
                    check = false
                    huishouJiaojierenTiaoma ="";
                    huishouHuishourenTiaoma = "";
                    $("#huishouJiaojierenTiaoma").focus();
                    alert("回收人和交接人不能为同一人")
                }

                $('input[name="packNum"]').each(function () {
                    var num = $(this).val();
                    debugger
                    if (isNullOrEmpty($(this).val()) || $(this).val() == 0) {
                        check = false;
                        alert("包数量不能为空")
                    }
                });

                $('input[name="productqueshiNum"]').each(function () {
                    if (isNullOrEmpty($(this).val())) {
                        check = false;
                        alert("缺失数量不能为空")
                    }
                });
                if (check) {
                    showMask();
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/wutiaoma/save.do",
                        data: $('.create-order').serialize(),// 你的formid
                        error: function (request) {
                            layer.alert("回收失败!");
                        },
                        success: function (data) {
                            $(".query-btn").css("opacity", "1");
                            $("#mask").hide();
                            if (data.status == "true") {
                                layer.alert("回收成功,点击确定继续回收");
                                sleep(1000);
                                window.location.href = 'huishou_wutiaoma.jsp';
                            } else {
                                layer.alert(data.msg);
                            }
                        }
                    });
                }

            }
        }


    })

    function sleep(n) { //n表示的毫秒数
        var start = new Date().getTime();
        while (true) if (new Date().getTime() - start > n) break;
    }
    $(function(){
        $(window).unload(function(){
            alert("获取到了页面要关闭的事件了！");
        });
    })


</script>
</html>